<template>
  <el-row>
    <el-col :span="24" :xs="0">
      <div>
        <img src="@/assets/user/03-1产品与服务-IT专业运维服务/e0e7b04bee951791e2139ef95cd91f37_.png"
             style="object-fit: contain;width: 100%;height: 100%"
             alt="">
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div>
        <img src="@/assets/user/03-1产品与服务-IT专业运维服务/01.png"
             style="object-fit: cover;width: 100%;height: 400px"
             alt="">
        <div class="product-overlay" style="top: 50px;left: 20px;width: 300px">
          <div style="color: #ffcd6c;font-size: 46px;font-weight: bold">IT专业运维服务</div>
          <div style="color: #fff;font-size: 20px;margin-top: 20px">成熟的支持架构，专业的服务团队，覆盖全国的服务网络
          </div>
          <div style="color: #fff;font-size: 20px;margin-top: 5px">借鉴国际性企业的先进管理方式，共享支持资源</div>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-row style="text-align: center">
    <el-col :span="24" :xs="0">
      <div class="tabs" style="margin: 0 auto;width:450px;justify-content: space-evenly">
        <div class="tab" @click="changeActiveTab2(1)" :class="{active:activeTab===1}">IT专业运维服务</div>
        <div class="tab" @click="changeActiveTab2(2)" :class="{active:activeTab===2}">移动智能产品</div>
        <div class="tab" @click="changeActiveTab2(3)" :class="{active:activeTab===3}">智慧城市平台</div>
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="tabs" style="margin: 0 auto;width:390px;justify-content: space-evenly">
        <div class="tab" @click="changeActiveTab2(1)" :class="{active:activeTab===1}" style="width: 140px;margin-right: 10px">IT专业运维服务</div>
        <div class="tab" @click="changeActiveTab2(2)" :class="{active:activeTab===2}" style="margin-right: 10px">移动智能产品</div>
        <div class="tab" @click="changeActiveTab2(3)" :class="{active:activeTab===3}">智慧城市平台</div>
      </div>
    </el-col>
  </el-row>
  <div v-if="activeTab===1">
    <div
        style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
      服务内容
    </div>
    <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">SERVICE CONTENT</div>
    <el-row>
      <el-col :span="24" :xs="0">
        <div style="display: flex;margin: 0 auto;width: 1190px;text-align: center">
          <div style="width:390px;margin-right: 10px">
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/03.png" style="object-fit: cover" alt="">
            <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                IT基础运维
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                HELPDESK(服务台)，桌面系统软、硬件维护管理，网络、服务器运行维护管理，企业软件、数据库运维管理。
              </div>
            </div>
          </div>
          <div style="width:390px;margin-right: 10px">
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/04.png"  style="object-fit: cover" alt="">
            <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                IT系统解决方案
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                IT基础架构建设，网络、存储解决方案，网络安全解决方案，云计算方案整体实施。
              </div>
            </div>
          </div>
          <div style="width: 390px">
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/05.png"  style="object-fit: cover" alt="">
            <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                IT运维项目外包管理
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                项目实施方案建议，为企业输送优质人才
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="0" :xs="24">
        <div style="width: 100%">
          <img src="@/assets/user/03-1产品与服务-IT专业运维服务/03.png" alt="" style="width: 100%">
          <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;">
            <div
                style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
              IT基础运维
            </div>
            <div style="font-size: 18px;color: #676765;margin-top: 10px">
              HELPDESK(服务台)，桌面系统软、硬件维护管理，网络、服务器运行维护管理，企业软件、数据库运维管理。
            </div>
          </div>
        </div>
        <div style="width: 100%;">
          <img src="@/assets/user/03-1产品与服务-IT专业运维服务/04.png" alt="" style="width: 100%">
          <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 20px">
            <div
                style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
              IT系统解决方案
            </div>
            <div style="font-size: 18px;color: #676765;margin-top: 10px">
              IT基础架构建设，网络、存储解决方案，网络安全解决方案，云计算方案整体实施。
            </div>
          </div>
        </div>
        <div style="width: 100%">
          <img src="@/assets/user/03-1产品与服务-IT专业运维服务/05.png" alt="" style="width: 100%">
          <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 20px">
            <div
                style="font-size:20px;font-weight: bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
              IT运维项目外包管理
            </div>
            <div style="font-size: 18px;color: #676765;margin-top: 10px">
              项目实施方案建议，为企业输送优质人才
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        业务优势
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">BUSINESS ADVANTAGE</div>
      <div style="font-size: 18px;color: #666;width: 100%;text-align: center">
        <div>• 成熟的支持架构，专业的服务团队</div>
        <div style="margin-top: 10px">• 覆盖全国的服务网络、备件/备机支持</div>
        <div style="margin-top: 10px">• 使用世界水平的管理工具规范支持流程</div>
        <div style="margin-top: 10px">• 借鉴国际性企业的先进管理方法，共享支持资源</div>
        <div style="margin-top: 10px">• 作为IBM等国际跨国公司核心供应商，可以为客户引进专有的管理和支持工具</div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" :xs="0">
        <div style="width: 100%;text-align: center;margin-top: 30px">
          <img src="@/assets/user/03-1产品与服务-IT专业运维服务/06.png" alt="" style="object-fit: cover">
        </div>
      </el-col>
      <el-col :span="0" :xs="24">
        <div style="width: 100%;text-align: center;margin-top: 30px">
          <img src="@/assets/user/03-1产品与服务-IT专业运维服务/06.png" alt="" style="object-fit: cover;width: 100%">
        </div>
      </el-col>
    </el-row>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        服务方式
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">SERVICE METHOD</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div class="service-method">
            <div class="service-item" style="margin-right: 10px">
              <div style="height: 40px;font-size: 20px;color: #374ec2">应急服务</div>
              <div style="height: 40px;font-size: 18px;color: #676765">临时紧急上门提供IT故障排除服务</div>
            </div>
            <div class="service-item">
              <div style="height: 40px;font-size: 20px;color: #374ec2">定期服务</div>
              <div style="height: 40px;font-size: 18px;color: #676765">定期为客户提供IT运维巡检服务。</div>
            </div>
            <div class="service-item" style="margin-right: 10px;margin-top: 10px">
              <div style="height: 40px;font-size: 20px;color: #374ec2">驻场服务</div>
              <div style="height: 40px;font-size: 18px;color: #676765">随时为客户提供IT相关服务</div>
            </div>
            <div class="service-item" style="margin-top: 10px">
              <div style="height: 40px;font-size: 20px;color: #374ec2">项目服务</div>
              <div style="height: 40px;font-size: 18px;color: #676765">
                及时为客户提供信息化建设咨询、设计，为客户信息化项目实施、系统开发、机房建设等提供专业人才及服务。
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div class="service-item" style="width: 95%;padding-left: 5%">
            <div style="height: 40px;font-size: 20px;color: #374ec2">应急服务</div>
            <div style="height: 40px;font-size: 18px;color: #676765">临时紧急上门提供IT故障排除服务</div>
          </div>
          <div class="service-item" style="margin-top: 10px;width: 95%;padding-left: 5%">
            <div style="height: 40px;font-size: 20px;color: #374ec2">定期服务</div>
            <div style="height: 40px;font-size: 18px;color: #676765">定期为客户提供IT运维巡检服务。</div>
          </div>
          <div class="service-item" style="margin-top: 10px;width: 95%;padding-left: 5%">
            <div style="height: 40px;font-size: 20px;color: #374ec2">驻场服务</div>
            <div style="height: 40px;font-size: 18px;color: #676765">随时为客户提供IT相关服务</div>
          </div>
          <div class="service-item" style="margin-top: 10px;width: 95%;padding-left: 5%;height: 120px">
            <div style="height: 40px;font-size: 20px;color: #374ec2">项目服务</div>
            <div style="height: 40px;font-size: 18px;color: #676765">
              及时为客户提供信息化建设咨询、设计，为客户信息化项目实施、系统开发、机房建设等提供专业人才及服务。
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        全国服务网络
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">NATIONAL SERVICE NETWORK</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display:flex;width: 1200px;margin: auto">
            <div style="width: 750px;font-size: 18px;color: #666">
              <div style="margin-top: 10px">
                公司总部设立在广州,在上海设有分公司,在全国31个城市设有办事处可以覆盖除西藏、,青海省以外的所有省会级以上城市，在华南、华东区域，可以完全覆盖到省会级以下的县市级、县级城市。
              </div>
              <div style="margin-top: 10px">L1:北京、上海、广州、深圳,2小时上门响应;</div>
              <div style="margin-top: 10px">L2:省会级城市、华南、华东部份区域，4小时上门响应；</div>
              <div style="margin-top: 10px">L3:省会级以下的县市级、县级城市,6小时上门响应;</div>
            </div>
            <img style="margin-left: 49px" src="@/assets/user/03-1产品与服务-IT专业运维服务/09.png" alt="">
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div style="margin:0 10px;font-size: 18px;color: #666">
            <div style="margin-top: 10px">
              公司总部设立在广州,在上海设有分公司,在全国31个城市设有办事处可以覆盖除西藏、,青海省以外的所有省会级以上城市，在华南、华东区域，可以完全覆盖到省会级以下的县市级、县级城市。
            </div>
            <div style="margin-top: 10px">L1:北京、上海、广州、深圳,2小时上门响应;</div>
            <div style="margin-top: 10px">L2:省会级城市、华南、华东部份区域，4小时上门响应；</div>
            <div style="margin-top: 10px">L3:省会级以下的县市级、县级城市,6小时上门响应;</div>
          </div>
          <div>
            <img style="width: 100%" src="@/assets/user/03-1产品与服务-IT专业运维服务/09.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        成功案例
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">SERVICE CONTENT</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 15px;width: 390px">
              <img src="@/assets/user/03-1产品与服务-IT专业运维服务/10.png" alt="">
              <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  信息技术服务
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  宏意星公司凭借多年来深入积累的独特经验和综合服务能力,在高科技、通信、银行、保险、企业金融、医疗健康、公用事业、电力、零售、汽车等领域具有强劲的行业服务优势，并拥有坚实的客户基础和良好口碑。
                </div>
              </div>
            </div>
            <div style="margin-right: 15px;width: 390px">
              <img src="@/assets/user/03-1产品与服务-IT专业运维服务/11.png" alt="">
              <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  EUS方面的项目客户
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  高露洁、美的、诺基亚、飞利浦、星展银行、捷豹路虎、仲量联行、联合利华、中国移动、科文斯、中国人保、观致汽车、蔡司光学、惠而浦、美赞臣、思科、米其林、美国道富银行、宝马、奥美、百威、福陆、中宏保险、路透社、美国运通、陶氏化
                  学、通用、花旗银行、杜邦、福斯等世界知名客户。
                </div>
              </div>
            </div>
            <div style="width: 390px">
              <img src="@/assets/user/03-1产品与服务-IT专业运维服务/12.png" alt="">
              <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  系统集成方面项目案例
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  <div>• 中国石油集团工程设计有限责任公司西南分公司网络系统建设（桌面云部署）</div>
                  <div>• 西部机场集团十三五信息化规划、安全生产远程监控与应急指挥系统项目</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div>
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/10.png" style="width: 100%" alt="">
            <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                信息技术服务
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                宏意星公司凭借多年来深入积累的独特经验和综合服务能力,在高科技、通信、银行、保险、企业金融、医疗健康、公用事业、电力、零售、汽车等领域具有强劲的行业服务优势，并拥有坚实的客户基础和良好口碑。
              </div>
            </div>
          </div>
          <div>
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/11.png" style="width: 100%" alt="">
            <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                EUS方面的项目客户
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                高露洁、美的、诺基亚、飞利浦、星展银行、捷豹路虎、仲量联行、联合利华、中国移动、科文斯、中国人保、观致汽车、蔡司光学、惠而浦、美赞臣、思科、米其林、美国道富银行、宝马、奥美、百威、福陆、中宏保险、路透社、美国运通、陶氏化
                学、通用、花旗银行、杜邦、福斯等世界知名客户。
              </div>
            </div>
          </div>
          <div>
            <img src="@/assets/user/03-1产品与服务-IT专业运维服务/12.png" style="width: 100%" alt="">
            <div style="background: #f5f5f5;height: 300px;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-size:20px;font-weight:bold;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                系统集成方面项目案例
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                <div>• 中国石油集团工程设计有限责任公司西南分公司网络系统建设（桌面云部署）</div>
                <div>• 西部机场集团十三五信息化规划、安全生产远程监控与应急指挥系统项目</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
  <div v-if="activeTab===2">
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        服务内容
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">SERVICE CONTENT</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display: flex;margin: 0 auto;width: 1200px">
            <div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/01.png" alt="">
              <div style="background: #f5f5f5;height: 200px;text-align: center;margin-top: -5px;padding: 0 100px">
                <h3 style="color: blue;margin-top: 0;padding-top: 20px;letter-spacing: 2px">智能设备软硬件</h3>
                <div style="font-size: 18px;color: #666;line-height: 2">
                  可穿戴设备软硬件、智能家居、运动健康产品研发，产品主要有运动手环、心率计、智能药盒、宠物计步器、脂肪电子秤、WIFI智能调色灯、自行车智能导航设置、智游骑APP
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/01.png" alt="">
            <div style="background: #f5f5f5;height: 300px;text-align: center;padding: 0 10px">
              <h3 style="color: blue;margin-top: 0;padding-top: 20px;letter-spacing: 2px">智能设备软硬件</h3>
              <div style="font-size: 18px;color: #666;line-height: 2">
                可穿戴设备软硬件、智能家居、运动健康产品研发，产品主要有运动手环、心率计、智能药盒、宠物计步器、脂肪电子秤、WIFI智能调色灯、自行车智能导航设置、智游骑APP
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        成功案例
      </div>
      <div style="color:#676765;font-size: 16px;text-align: center;margin-bottom: 30px">SERVICE CONTENT</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 20px;width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">CycleNav-导航灯APP系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/02.png" alt="">
            </div>
            <div style="width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">智游骑导航APP系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/03.png" alt="">
            </div>
          </div>
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 20px;width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">Colt Traxx-导航灯APP系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/04.png" alt="">
            </div>
            <div style="width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">Keefit2-运动手环APP洗系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/05.png" alt="">
            </div>
          </div>
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 20px;width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">Keelight-智能灯APP系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/06.png" alt="">
            </div>
            <div style="width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">Trasense-运动手环APP系列</h3>
              </div>
              <img src="@/assets/user/03-2产品与服务-移动智能产品/07.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">CycleNav-导航灯APP系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/02.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">智游骑导航APP系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/03.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">Colt Traxx-导航灯APP系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/04.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">Keefit2-运动手环APP洗系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/05.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">Keelight-智能灯APP系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/06.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">Trasense-运动手环APP系列</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-2产品与服务-移动智能产品/07.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div v-if="activeTab===3">
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        服务内容
      </div>
      <div style="font-size: 16px;color:#676765;text-align: center;margin-bottom: 30px">SERVICE CONTENT</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display: flex;margin: 0 auto;width: 1200px">
            <div style="width: 295px;margin-right: 6px">
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/01.png" alt="">
              <div style="background: #f5f5f5;height: 300px;text-align: center;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  智慧业务
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  在智慧业务领域，宏意星公司在西南地区配合IBM展开了"智慧城市"战略布局。涉及项目案例有：成都青白江物流商贸信息港咨询规划、实施项目；重庆智慧物理公共信息平台一、二、三期项目。
                </div>
              </div>
            </div>
            <div style="width: 295px;margin-right: 6px">
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/02.png" alt="">
              <div style="background: #f5f5f5;height: 300px;text-align: center;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  智能设备软硬件
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  可穿戴设备软硬件、智能家居、运动健康产品研发、产品主要有运动手环、心率计、智能药盒。宠物计步器。脂肪电子秤。WIFI智能调色灯、自行车智能导航装置、智游骑APP。
                </div>
              </div>
            </div>
            <div style="width: 295px;margin-right: 6px">
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/03.png" alt="">
              <div style="background: #f5f5f5;height: 300px;text-align: center;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  金融大数据分析
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  金融大数据分析平台：Fitlab股票智能分析平台。
                </div>
              </div>
            </div>
            <div style="width: 297px">
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/04.png" alt="">
              <div style="background: #f5f5f5;height: 300px;text-align: center;margin-top: -5px;padding: 0 20px">
                <div
                    style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                  垂直行业SNS
                </div>
                <div style="font-size: 18px;color: #676765;margin-top: 10px">
                  众律网律师社交平台、蔡司后台管理平台、数易书院官网、鼎鼎留学官网。
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/01.png" alt="">
            <div style="background: #f5f5f5;height: 250px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                智慧业务
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                在智慧业务领域，宏意星公司在西南地区配合IBM展开了"智慧城市"战略布局。涉及项目案例有：成都青白江物流商贸信息港咨询规划、实施项目；重庆智慧物理公共信息平台一、二、三期项目。
              </div>
            </div>
          </div>
          <div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/02.png" alt="">
            <div style="background: #f5f5f5;height: 250px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                智能设备软硬件
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                可穿戴设备软硬件、智能家居、运动健康产品研发、产品主要有运动手环、心率计、智能药盒。宠物计步器。脂肪电子秤。WIFI智能调色灯、自行车智能导航装置、智游骑APP。
              </div>
            </div>
          </div>
          <div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/03.png" alt="">
            <div style="background: #f5f5f5;height: 250px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                金融大数据分析
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                金融大数据分析平台：Fitlab股票智能分析平台。
              </div>
            </div>
          </div>
          <div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/04.png" alt="">
            <div style="background: #f5f5f5;height: 250px;text-align: center;margin-top: -5px;padding: 0 20px">
              <div
                  style="font-weight:bold;font-size:20px;color: #374ec2;margin-top: 0;padding-top: 20px;letter-spacing: 2px">
                垂直行业SNS
              </div>
              <div style="font-size: 18px;color: #676765;margin-top: 10px">
                众律网律师社交平台、蔡司后台管理平台、数易书院官网、鼎鼎留学官网。
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
    <div>
      <div
          style="color: #374ec2;font-size: 30px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-top: 20px;margin-bottom: 10px">
        成功案例
      </div>
      <div style="font-size: 16px;color:#676765;text-align: center;margin-bottom: 30px">SUCCESS CASE</div>
      <el-row>
        <el-col :span="24" :xs="0">
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 20px;width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">众律网律师社交平台</h3>
              </div>
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/05.png" alt="">
            </div>
            <div style="width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">蔡司后台管理平台</h3>
              </div>
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/06.png" alt="">
            </div>
          </div>
          <div style="display: flex;margin: 0 auto 50px auto;width: 1200px;">
            <div style="margin-right: 20px;width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">数易书院官网</h3>
              </div>
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/07.png" alt="">
            </div>
            <div style="width: 590px">
              <div style="height: 50px;background: mediumslateblue">
                <h3 style="text-align: center;line-height: 50px;color: white">鼎鼎留学官网</h3>
              </div>
              <img src="@/assets/user/03-3产品与服务-智慧城市平台/08.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">众律网律师社交平台</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/05.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">蔡司后台管理平台</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/06.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">数易书院官网</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/07.png" alt="">
          </div>
          <div>
            <div style="height: 50px;background: mediumslateblue">
              <h3 style="text-align: center;line-height: 50px;color: white">鼎鼎留学官网</h3>
            </div>
            <img style="width: 100%" src="@/assets/user/03-3产品与服务-智慧城市平台/08.png" alt="">
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

let activeTab = ref(parseInt(localStorage.getItem("tab2")))
window.scrollTo(0,0)
let route = useRoute();
let router = useRouter();
function changeActiveTab2(index) {
  activeTab.value = index;
}

</script>

<style scoped>
.product-overlay {
  position: absolute;
  color: #333;
}

.tabs {
  height: 60px;
  display: flex;
  width: 100%;
  margin: 0 auto;

  .tab {
    height: 40px;
    width: 120px;
    margin-top: 30px;
    cursor: pointer;
    margin-right: 30px;
  }

  .tab.active {
    color: blue;
    border-bottom: 2px solid blue;
  }
}

.service-method {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 1200px;
  margin: auto;
}

.service-item {
  background-color: #E6F3FF;
  border-radius: 10px;
  padding-left: 20px;
  padding-top: 10px;
  height: 100px;
  width: 555px;
  font-size: 18px;
  color: #666
}

.service-item h3 {
  color: #2468D3;
}
</style>